"use client";

import { ColumnDef } from "@tanstack/react-table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { PencilIcon } from "lucide-react";
import { Host } from "@/lib/api";

export const hostColumns = (onEdit: (host: Host) => void): ColumnDef<Host>[] => [
  {
    accessorKey: "hostname",
    header: "Hostname",
  },
  {
    accessorKey: "ip_address",
    header: "IP Address",
  },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => {
      const status: string = row.getValue("status");
      const variant = status === "active" ? "default" : status === "maintenance" ? "secondary" : "destructive";
      
      return (
        <Badge variant={variant}>
          {status.charAt(0).toUpperCase() + status.slice(1)}
        </Badge>
      );
    },
  },
  {
    accessorKey: "assets_count",
    header: "Assets",
    cell: ({ row }) => {
      const assetsCount: number = row.getValue("assets_count");
      
      if (assetsCount === 0) {
        return "0 assets";
      }
      
      return (
        <div>
          {assetsCount} assets
        </div>
      );
    },
  },
  {
    id: "actions",
    cell: ({ row }) => {
      const host = row.original;
      
      return (
        <div className="text-right">
          <Button 
            variant="ghost" 
            size="sm" 
            onClick={() => onEdit(host)}
          >
            <PencilIcon className="h-4 w-4" />
          </Button>
        </div>
      );
    },
  },
];